<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <div v-if="!isLogin"> <!--当isLogin为true表示登录状态，登录时此div应该不显示 所以需要添加！取反-->
        <a href="javascript:void(0)">注册</a>
        <!--javascript:void(0)废掉超链接的跳转功能-->
        <a href="javascript:void(0)" @click="login()">登录</a>
    </div>

    <div v-if="isLogin">
        <input type="text" v-model="info">
        <a href="javascript:void(0)" @click="add()">添加</a>
        <a href="javascript:void(0)" @click="logout()">登出</a>
        <ul>
            <li v-for="name in names">{{name}}</li>
        </ul>
    </div>

</div>
<!--引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            names:["刘备","关羽"],
            isLogin:false,
            info:""
        },
        methods:{
          login:function () {
              v.isLogin = true;
          },
            logout:function () {
              v.isLogin = false;
          },
            add:function () {
              v.names.push(v.info)
          },
        }
    })
</script>
</body>
</html>